<template>
  <div>
    <Header active-index="1" />
    <div class="main-banner">
      <div class="banner-text">
        <h2 class="title">科技引领未来</h2>
        <h2 class="title">责任造就明天</h2>
        <el-button type="primary" @click="releaseVisible = true"
          >立即发布</el-button
        >
      </div>
    </div>
    <section class="iq-fancy-box-section">
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">个人中心</h2>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <div
              class="iq-fancy-box iq-fancy-box-style-1 text-center iq-box-shadow wow fadeInUp"
              data-wow-duration="0.6s"
            >
              <div class="iq-img-area">
                <img
                  :src="$imgURL + 'fancy-box/01.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />
              </div>
              <div class="iq-fancy-box-content">
                <h5 class="iq-fancy-title">
                  <router-link :to="'/userCenter?activeName=second'"
                    >我的发布</router-link
                  >
                </h5>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="iq-fancy-box iq-fancy-box-style-1 text-center iq-box-shadow wow fadeInUp"
              data-wow-duration="1.2s"
            >
              <div class="iq-img-area">
                <img
                  :src="$imgURL + 'fancy-box/02.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />
              </div>
              <div class="iq-fancy-box-content">
                <h5 class="iq-fancy-title">
                  <router-link :to="'/userCenter?activeName=third'"
                    >我的交易</router-link
                  >
                </h5>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="iq-fancy-box iq-fancy-box-style-1 text-center iq-box-shadow wow fadeInUp"
              data-wow-duration="1.8s"
            >
              <div class="iq-img-area">
                <img
                  :src="$imgURL + 'fancy-box/03.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />
              </div>
              <div class="iq-fancy-box-content">
                <h5 class="iq-fancy-title">
                  <router-link :to="'/userCenter?activeName=fourth'"
                    >我的电表</router-link
                  >
                </h5>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
    <section class="iq-application">
      <el-row>
        <el-col :span="24">
          <h2 class="iq-title" style="color: #0d1e67">链上市场</h2>
          <p class="iq-title-desc">链上市场洞察：市场多维度向好！</p>
        </el-col>
      </el-row>
      <router-link :to="'/link-release'">
        <el-button type="primary">查看更多</el-button>
      </router-link>
    </section>
    <section
      class="iq-pricing-section pt-0 wow fadeInUp top40"
      data-wow-duration="0.6s"
    >
      <div class="container">
        <el-row>
          <el-col :span="24">
            <h2 class="iq-title" style="color: #0d1e67">帮助中心</h2>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <div
              class="iq-price-container iq-price-table-6 text-center iq-box-shadow wow fadeInUp"
              data-wow-duration="0.6s"
            >
              <div class="iq-price-header">
                <h5 class="iq-price">荣誉榜</h5>
                <p class="iq-price-description">企业获得的荣誉等。</p>
                <br />
              </div>
              <div class="iq-price-footer">
                <div class="iq-btn-container">
                  <router-link :to="'/honor'">查看更多</router-link>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="iq-price-container iq-price-table-6 text-center active iq-box-shadow wow fadeInUp"
              data-wow-duration="1.2s"
            >
              <div class="iq-price-header">
                <h5 class="iq-price">微网系统</h5>
                <p class="iq-price-description">
                  详细介绍平台配套的硬件系统及软硬件总体架构。
                </p>
                <br />
              </div>
              <div class="iq-price-footer">
                <div class="iq-btn-container">
                  <router-link :to="'/help'">查看更多</router-link>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div
              class="iq-price-container iq-price-table-6 text-center iq-box-shadow wow fadeInUp"
              data-wow-duration="1.8s"
            >
              <div class="iq-price-header">
                <h5 class="iq-price">联系我们</h5>
                <p class="iq-price-description">
                  1，西安交通大学链上能源交易<br />
                  2，QQ扫描二维码，获得更多资讯！
                </p>
              </div>
              <div class="iq-price-footer">
                <div class="iq-btn-container">
                  <router-link :to="'/contact'"> 查看更多 </router-link>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
    <Footer />

    <el-dialog title="发布交易" :visible.sync="releaseVisible" width="1000px">
      <div class="box">
        您可以在输入了<b>交易时间段</b>后选择三种买卖输入类型：<br />
        <b>输入总量：</b
        >输入您在交易时间段内需要交易的全部电量，系统会将电量自动分配到每一个小时内进行撮合交易。(注意，您的输入总量必须与购买/卖出数量一致)<br />
        <b>输入每小时所需电量：</b
        >输入您在交易时间段的每一小时内需要交易的电量，系统会据此为您撮合交易。(注意，您的每小时所需电量之和必须与购买/卖出数量一致)<br />
        <b>输入每小时所需电量范围：</b
        >输入您在交易时间段内的每一小时内能承受的交易电量上下限，系统会在您输入的电量范围内为您撮合交易。(注意，您的每小时所需电量下限之和必须<span
          class="red"
          >不大于</span
        >)购买/卖出数量；每小时所需电量上限之和必须<span class="red"
          >不小于</span
        >购买/卖出数量；对于某一个小时，您的每小时所需电量下限必须<span
          class="red"
          >不大于</span
        >每小时所需电量上限）
      </div>
      <el-form ref="releaseDto" :model="releaseDto" label-width="200px">
        <el-form-item label="购买/卖出数量：">
          <el-input
            v-model="releaseDto.total_elec"
            placeholder="请输入购买/卖出数量"
          />
        </el-form-item>
        <el-form-item label="购买/卖出价格(分)：">
          <el-input
            v-model="releaseDto.price"
            placeholder="请输入购买/卖出价格"
          />
        </el-form-item>
        <el-form-item label="卖出/使用日期：">
          <el-date-picker
            v-model="releaseDto.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="请选择交易时间段：">
          <el-col :span="11">
            <el-select
              v-model="releaseDto.start_time"
              placeholder="开始时间"
              style="width: 100%"
            >
              <div
                v-if="
                  releaseDto.date != '' &&
                  releaseDto.date.getDate() == new Date().getDate()
                "
              >
                <el-option
                  v-for="a in new Date().getMinutes() >= 50
                    ? 22 - new Date().getHours()
                    : 23 - new Date().getHours()"
                  :key="a"
                  :value="
                    new Date().getMinutes() >= 50
                      ? a + new Date().getHours() + 1
                      : a + new Date().getHours()
                  "
                  >{{
                    new Date().getMinutes() >= 50
                      ? a + new Date().getHours() + 1
                      : a + new Date().getHours()
                  }}:00
                </el-option>
              </div>
              <div v-else>
                <el-option v-for="a in 24" :key="a" :value="a - 1"
                  >{{ a - 1 }}:00
                </el-option>
              </div>
            </el-select>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-select
              v-model="releaseDto.end_time"
              placeholder="结束时间"
              style="width: 100%"
            >
              <div v-if="releaseDto.start_time || releaseDto.start_time == 0">
                <el-option
                  v-for="a in 24 - releaseDto.start_time"
                  :key="a"
                  :value="a + releaseDto.start_time"
                >
                  {{ a + releaseDto.start_time }}:00
                </el-option>
              </div>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="选择您的角色">
          <el-radio-group v-model="releaseDto.trade_type">
            <el-radio label="0">买方</el-radio>
            <el-radio label="1">卖方</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="releaseDto.end_time - releaseDto.start_time > 0">
          <el-form-item label="买卖输入类型">
            <el-radio-group
              v-model="releaseDto.input_type_id"
              @change="clearData"
            >
              <el-radio label="0">输入总量</el-radio>
              <el-radio label="1">输入每小时所需电量</el-radio>
              <el-radio label="2">输入每小时所需电量范围</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- v-if="typeSelect == '输入每小时所需电量'" -->
          <div v-if="releaseDto.input_type_id == 1">
            <el-form-item label="每小时所需电量(千瓦时):">
              <div class="w200input">
                <el-input
                  v-for="a in releaseDto.end_time - releaseDto.start_time"
                  :key="a"
                  v-model="releaseDto.elec_value[a - 1]"
                  :placeholder="a + releaseDto.start_time - 1 + ':00'"
                  style="width: 100%"
                />
              </div>
            </el-form-item>
          </div>
          <!-- v-if="typeSelect == '输入每小时所需电量范围'" -->
          <div v-if="releaseDto.input_type_id == 2">
            <el-form-item label="每小时范围上限(千瓦时):">
              <div class="w200input">
                <el-input
                  v-for="a in releaseDto.end_time - releaseDto.start_time"
                  :key="a"
                  v-model="releaseDto.elec_upper[a - 1]"
                  :placeholder="a + releaseDto.start_time - 1 + ':00'"
                  style="width: 100%"
                />
              </div>
            </el-form-item>
            <el-form-item label="每小时范围下限(千瓦时):">
              <div class="w200input">
                <el-input
                  v-for="a in releaseDto.end_time - releaseDto.start_time"
                  :key="a"
                  v-model="releaseDto.elec_lower[a - 1]"
                  :placeholder="a + releaseDto.start_time - 1 + ':00'"
                  style="width: 100%"
                />
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="买卖的相关介绍">
          <el-input
            v-model="releaseDto.desc"
            type="textarea"
            placeholder="请输入买卖的相关介绍"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="releaseVisible = false">取 消</el-button>
        <el-button type="primary" @click="releaseDealHelp">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { releaseDeal } from "@/api/index";
import Header from "@/components/header/index";
import Footer from "@/components/footer/index";
import { Message } from "element-ui";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      releaseVisible: false,
      IdRule: 1,
      typeSelect: "",
      ruleForm: {
        IdRule: "1",
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      releaseDto: {
        input_type_id: "",
        trade_type: "",
        total_elec: "",
        start_time: undefined,
        end_time: undefined,
        price: "",
        date: "",
        elec_value: [],
        elec_upper: [],
        elec_lower: [],
      },
      pickerOptions: {
        disabledDate(current) {
          return current.getTime() < Date.now() - 8.64e7;
        },
      },
    };
  },
  methods: {
    clearReleaseDto() {
      this.releaseDto = {
        input_type_id: "",
        trade_type: "",
        total_elec: "",
        start_time: "",
        end_time: undefined,
        price: "",
        date: "",
        elec_value: [],
        elec_upper: [],
        elec_lower: [],
      };
    },
    clearData() {
      this.releaseDto.elec_value = [];
      this.releaseDto.elec_lower = [];
      this.releaseDto.elec_upper = [];
    },
    releaseDealHelp() {
      // 处理空数据情况
      if (
        this.releaseDto.input_type_id === "" ||
        this.releaseDto.trade_type === "" ||
        this.releaseDto.total_elec === "" ||
        this.releaseDto.price === "" ||
        this.releaseDto.start_time === "" ||
        this.releaseDto.end_time === undefined ||
        this.releaseDto.date === "" ||
        (this.releaseDto.input_type_id == 1 &&
          this.releaseDto.elec_value.length == 0) ||
        (this.releaseDto.input_type_id == 2 &&
          (this.releaseDto.elec_upper.length == 0 ||
            this.releaseDto.elec_lower.length == 0))
      ) {
        this.$message.error("数据不能为空！");
        return;
      }
      if (
        !/(^[1-9]\d*$)/.test(this.releaseDto.price) &&
        !/(^[0-9]+(.[0-9]{1,3})?$)/.test(this.releaseDto.price)
      ) {
        this.$message.error("价格格式不正确！");
        return;
      }
      if (!/(^[1-9]\d*$)/.test(this.releaseDto.total_elec)) {
        this.$message.error("数量格式不正确！");
        return;
      }
      // 处理交易时间段
      // 处理时间槽大于总电量情况
      if (this.releaseDto.input_type_id == 1) {
        var temp = parseInt(0);
        for (var i = 0; i < this.releaseDto.elec_value.length; i++) {
          temp += parseInt(this.releaseDto.elec_value[i]);
        }
        if (parseInt(temp) != parseInt(this.releaseDto.total_elec)) {
          this.$message.error("时间槽确定值和不等于总电量，请检查！");
          return;
        }
      }
      if (this.releaseDto.input_type_id == 2) {
        var tempLow = parseInt(0);
        var tempHigh = parseInt(0);
        for (var i = 0; i < this.releaseDto.elec_lower.length; i++) {
          if (
            parseInt(this.releaseDto.elec_lower[i]) >
            parseInt(this.releaseDto.elec_upper[i])
          ) {
            this.$message.error("时间槽下限应该小于上限！");
            return;
          }
          tempLow += parseInt(this.releaseDto.elec_lower[i]);
          tempHigh += parseInt(this.releaseDto.elec_upper[i]);
        }
        if (parseInt(tempLow) > parseInt(this.releaseDto.total_elec)) {
          this.$message.error("时间槽下限和大于总电量，请检查！");
          return;
        }
        if (parseInt(tempHigh) < parseInt(this.releaseDto.total_elec)) {
          this.$message.error("时间槽上限和小于总电量，请检查！");
          return;
        }
      }
      // 处理结束时间 开始时间情况
      if (this.releaseDto.start_time >= this.releaseDto.end_time) {
        this.$message.error("开始时间应早于结束时间");
        return;
      }
      if (
        this.releaseDto.date.getDate() == new Date().getDate() &&
        new Date().getMinutes() >= 50 &&
        this.releaseDto.start_time == new Date().getHours() + 1
      ) {
        this.$message.error("开始时间为撮合前10分钟无法开始撮合！");
        return;
      }
      this.releaseDto.date.setHours(this.releaseDto.date.getHours() + 8); // 解决时区问题
      const _this = this;
      releaseDeal(_this.releaseDto).then((res) => {
        _this.clearReleaseDto();
        _this.releaseVisible = false;
        Message.success(
          "发布成功！市场撮合将在您选择的时间段前10分钟开始撮合，请注意查收。"
        );
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.w200input .el-input,
.w200input input {
  width: 100px !important;
  margin: 0px 10px 5px 0px;
  display: inline-block;
}
</style>
